<template>
  <div class="component-wrapper">
    <h2>当前评分:{{myStar}}</h2>
    <star-box
      :star='myStar'
      @change="myStar=$event"
    />
    <br />
    <br />
    <star-box
      :star='5'
      :disabled='true '
    />
    <br />
    <br />
    <!-- 只有布尔类型的props如果是true的话,可以省略等号和后面的内容,直接写属性名 -->
     <star-box
      :star='5'
      disabled
    />
    <h2>{{ myNum }}</h2>
    <stepper-input
      :num="myNum"
      @change="myNum = $event"
     />
    <!-- 不加括号 默认传过来的值 -->
     <son-box
      :name="'王小红'"
      @call-father="onCall"
    />
    <son-box
      :name="'王小红'"
      @call-father="onCall($event)"
    />
    <!-- 方法的插值绑定,不是事件监听的回调 -->
    <number-box
      v-show="false"
      v-for="n in 100"
      :key="n"
      :base="n"
      :bg="getRandomColor()"
      @add-num="addMoney"
    />
    <h3>你的理想:</h3>

    <p>月收入:{{ money }} 元</p>
    <number-box
      :base="money"
      :bg="getRandomColor()"
      @add-num="addMoney"
    />
    <p>房子面积{{ house }} 平米</p>
    <number-box
      :base="house"
      :bg="getRandomColor()"
      @add-num="house=$event"
    />
    <p>孩子 {{ kid  }}个</p>
    <number-box
      :base="kid"
      :bg="getRandomColor()"
      @add-num="addKid($event)"
    />
  </div>
</template>

<script>
//先导入,再注册
import NumberBox from '../components/NumberBox.vue'
import SonBox from '../components/SonBox.vue'
import StepperInput from '../components/StepperInput.vue'
  export default {
    //使用components注册局部组件
    components:{
      'number-box':NumberBox,
      SonBox,
      StepperInput
    },
    data(){
      return{
        money: 20000,
        house:120,
        kid: 2,
        myNum: 100,
        myStar: 3,
      }
    },
    methods:{
      getRandomColor(){
        const c =() => 200+Math.floor(Math.random()*55)
        return `rgb(${c()},${c()},${c()})`;
      },
      //自定义事件的回调函数的默认参数就是子组件$emit出来的值(第二个参数)
      addMoney(event){
        this.money = event;
      },
      addKid(v){
        this.kid=v;
      },
      onCall(event){
        console.log(event);
      }
    },

  }
</script>

<style lang="sass" >

</style>
